<template>
	<view class="page">
		<uni-title :title="orderInfo.orderNo" type="h2" align="center"></uni-title>
		<uni-section title="订单信息" type="line">
			<uni-list :border="false">
				<uni-list-item title="购物视频" rightText="查看" showArrow link :to="`/pages/order/video?orderId=${orderInfo.orderId}`"/>
				<uni-list-item title="联系电话" :rightText="orderInfo.customer.phoneNumber"/>
				<uni-list-item title="订单号" :rightText="orderInfo.orderId"/>
				<uni-list-item title="订单金额" :rightText="orderInfo.orderPrice"/>
				<uni-list-item title="支付状态" :rightText="orderInfo.payState == '2' ? '已支付' : '未支付'"/>
				<uni-list-item title="创建时间" :rightText="orderInfo.orderTime"/>
			</uni-list>
		</uni-section>
		<uni-section title="商品信息" type="line" >
			<template v-slot:right>
				<view class="a" @click="toAdd">新增</view>
			</template>
			<uni-list :border="false" v-if="selectedGoodsList && selectedGoodsList.length > 0">
				<uni-list-item
					v-for="(item, index) in selectedGoodsList" 
					:key="index" 
					:title="item.goodsName"
				>
					<template v-slot:footer>
						<uni-number-box :min="0" :max="100" :value="item.stock" @change="changeStock($event, index)"/>
					</template>
				</uni-list-item>
			</uni-list>
			<empty-view v-else></empty-view>
			<view class="footer" v-if="selectedGoodsList && selectedGoodsList.length > 0">
				<button type="primary" @click="handleEdit">确定</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import EmptyView from '@/components/EmptyView'
	export default {
		components: {
			EmptyView
		},
		data() {
			return {
				orderId: "",
				orderInfo: {},
				selectedGoodsList: []
			}
		},
		
		onLoad(options) {
			this.orderId = options.orderId
			
			this.getOrderInfo()
		},
		
		methods: {
			getOrderInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/orderDetail',
					data: {
						orderId: this.orderId
					},
					success: res => {
						if(res.data.success) {
							this.orderInfo = res.data.result
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			toAdd() {
				uni.navigateTo({
					url: '/pages/machine/goods?type=select&machineId=' + this.orderInfo.machine.machineId
				})
			},
			
			setGoods(list) {
				let newList = [];
				
				list.map(item => {
					let existsGoods = this.selectedGoodsList.find( goods => goods.goodsId === item.goodsId)
					if(existsGoods) {
						newList.push(existsGoods)
					} else {
						newList.push(item)
					}
				})
				
				this.selectedGoodsList = newList
			},
			
			changeStock(e, index) {
				this.selectedGoodsList[index].stock = e
			},
			
			handleEdit() {
				uni.showLoading({
					title: '处理中...'
				})
				
				let goods = [];
				
				this.selectedGoodsList.map( item => {
					if(item.stock > 0 ) {
						goods.push({
							goodsId : item.goodsId,
							size: item.stock
						})
					}
				})
				
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/recognizeAndPay',
					data: {
						orderId: this.orderId,
						userId: this.orderInfo.customer.userId,
						goods
					},
					method:'POST',
					success: res => {
						if(res.data.success) {
							uni.showToast({
								icon: 'success',
								title: '操作成功'
							})
							
							let pages = getCurrentPages(); // 当前页面
							
							let beforePage = pages[pages.length - 2]; // 上一页
							
							uni.navigateBack({
								success: function() {
									beforePage.$vm.onReload();
									uni.showToast({
										icon: 'success',
										title: '操作成功'
									})
								}
							});
							
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					},
					
					complete: () => {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.shop-video {
		margin: 0 25rpx;
		width: 700rpx;
	}
	
	.footer {
		padding: 20rpx
	}
</style>